<template>
	<div class="securitylog" id="securitylog">
		<div class="st_t1">
			安全记录
		</div>
		<div class="recently">
			<p>您上次登录系统时间为:<span>2017-03-06 15:23:11</span></p>
			<p>登录IP：127.0.0.1</p>
		</div>
		<div class="work">
			<div class="title">
				<span v-on:click="trade(1)" :class="{ 'active': trade_index == 1 }">最近登录历史</span>
				<span v-on:click="trade(2)" :class="{ 'active': trade_index == 2 }">安全登录历史</span>
			</div>
			<div v-if="trade_index == 1">
				<logintable></logintable>
			</div>
			<div v-if="trade_index == 2">
				22222
			</div>
		</div>
	</div>
</template>

<script>
	import logintable from './pannel/login_table'
	export default {
		name: 'securitylog',
		computed: {
		},
		data() {
			return {
				title: '',
				trade_index:1,
			}
		}, //定义变量
		components: {
			logintable
		}, //注册组件
		methods: { //方法都在这里
			trade: function(index) {
				this.trade_index = index;
			}
		},
		mounted() {
			var that = this;
			//获取banner
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	.securitylog {
	text-align: left;
		.st_t1 {
			padding: 15px 20px;
			background: #f4f4f4;
			width: 100%;
			text-align: left;
			font-size: 24px;
		}
		.recently{
			padding:15px 40px;
			margin:30px 0;
			font-size: 14px;
			line-height: 24px;
			color:#ff5f2e;
			background:#fef4f7;
		}
		.work {
			margin-top:10px;
			.title {
				background: #f4f4f4;
				height: 44px;
				font-size: 14px;
				span {
					width: 156px;
					height: 44px;
					display: inline-block;
					text-align: center;
					line-height: 44px;
					cursor: pointer;
				}
				span:last-child{
					width:159px;
					margin-left:0.3px;
				}
			}
			.active {
				background-color: #fff;
				color: #0093f1;
				font-size: 14px;
				font-weight: 600;
				border-top: 3px solid #0093f1;
			}
			.market_work {}
		}
	}
</style>